<template>
	<view>
		<view class="contentBox">
			<view class="topSwitch">
				<view class="titleBox">
					消息通知
					<text>已开启，将接收弹窗、个性化消息通知</text>
				</view>
				<view>
					<u-switch v-model="isSwitchTrue" @change="onSwitchChange" activeColor="#00BF5B" size="20">
					</u-switch>
				</view>
			</view>
			<view class="clearBtn" v-if="messageTypeList && messageTypeList.length">
				<view @click="onReadAllBtnClick">
					<image src="../../static/notice/clear.png"></image>
					<text>一键清除未读</text>
				</view>
			</view>
			<u-loading-page v-if="isLoading" :loading="isLoading" loading-text="加载中..."></u-loading-page>
			<view v-else>
				<no-msg-box v-if="!messageTypeList || !messageTypeList.length"></no-msg-box>

				<view v-else>
					<view class="messageItem" @tap="onMessageItemClick(item)" v-for="(item,index) in messageTypeList"
						:key="index">
						<view class="leaseItem">
							<view>
								<image class="leaseImg" :src="item.icon" mode="">
								</image>
								<text v-if="!item.readFlag && isSwitchTrue" class="unReadDt"></text>
							</view>
							<view>
								<view>{{item.title}}</view>
								<text>点击查看详情</text>
							</view>
						</view>
					</view>
				</view>

			</view>

		</view>
	</view>
</template>

<script>
	import {
		queryMessagePage,
		updateReadFlag,
		batchUpdateReadFlag, // 一键已读
		queryWhetherUserReceiveFlag,
		UpdateUserReceiveFlag
	} from "@/apis/message.js"
	import {
		getDiffTime,
		baseURL
	} from "@/utils/util.js"
	import noMsgBox from "@/components/noMsgBox.vue"

	export default {
		components: {
			noMsgBox
		},
		data() {
			return {
				baseURL,
				isSwitchTrue: false,
				messageTypeList: [],
				isLoading: true
			};
		},

		onShow() {
			this.getNoticeSwichType()
			this.onSearch();
		},

		methods: {
			onReadAllBtnClick() {
				uni.showModal({
					title: '提示',
					content: '全部消息标记为已读？',
					success: (res) => {
						if (res.confirm) {
							this.isLoading = true
							batchUpdateReadFlag().then(r => {
								if (r.code == '00000000') {
									this.onSearch();
									this.isLoading = false
								}else{
									this.isLoading = false
								}
							})
						}
					}
				});

			},
			getNoticeSwichType() {
				queryWhetherUserReceiveFlag().then(res => {
					if (res.code == '00000000') {
						this.isSwitchTrue = res.data
					}
				})
			},
			onSwitchChange(val) {
				this.isLoading = true
				UpdateUserReceiveFlag().then(res => {
					if (res.code == '00000000') {
						this.isSwitchTrue = res.data
						this.isLoading = false
					} else {
						this.isLoading = false
					}
				})
			},
			onSearch() {
				this.isLoading = true
				queryMessagePage().then(res => {
					if (res.code == '00000000') {
						for (let [index, item] of res.data.entries()) {
							if (index % 3 == 0) {
								item.icon = '../../static/notice/msg1.png'
							} else if (index % 3 == 1) {
								item.icon = '../../static/notice/msg2.png'
							} else if (index % 3 == 2) {
								item.icon = '../../static/notice/msg3.png'
							}
						}
						this.messageTypeList = res.data
						this.isLoading = false
					} else {
						this.isLoading = false
					}
				})
			},
			onMessageItemClick(item) {
				updateReadFlag({
					messageId: item.messageId
				}).then(res => { // 更新已读
					if (res.code == '00000000') {}
				})
				if (item.businessType == 1) {
					uni.navigateTo({
						url: `/pages/product/productDetail?id=${item.businessId}`
					})
				} else if (item.businessType == 2) {
					uni.navigateTo({
						url: `/pages/scheme/schemeDetail?id=${item.businessId}&name=${item.typeName}`
					})
				} else if (item.businessType == 3) {
					uni.setStorageSync('longImgUrl', item.businessId)
					uni.navigateTo({
						url: `/pages/message/systemMessageDetail?title=${item.title}`
					})
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	@import './message.scss';

	.contentBox {
		margin-top: 0;
	}

	.topSwitch {
		background-color: #fff;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;

		.titleBox {
			font-size: 32rpx;
			color: #000000;
			font-weight: 600;

			text {
				margin-left: 10rpx;
				color: #9C9C9C;
				font-weight: 400;
				font-size: 24rpx;
				vertical-align: 2rpx;
			}
		}
	}

	.clearBtn {
		height: 60rpx;

		&>view {
			height: 50rpx;
			line-height: 50rpx;
			background-color: rgba(204, 204, 204, 0.3);
			padding: 0 15rpx;
			color: #9C9C9C;
			border-radius: 40rpx;
			font-size: 24rpx;
			text-align: center;
			margin-right: 30rpx;
			float: right;
			width: 220rpx;

			&>image {
				height: 28rpx;
				width: 28rpx;
				vertical-align: top;
				margin: 10rpx 4rpx 0 0;
			}
		}

	}

	.slot-content {
		width: 100%;
		min-height: 400rpx;
		overflow: auto;

		image {
			width: 100%;
		}
	}
</style>
